<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!--css-->
		<!-- 表格 -->
		<style type="text/css">
			table tr th {
				background: #f7f7f7;
			}

			table,
			table tr th,
			table tr td {
				border: 1px solid #eaeaea;
			}

			table {
				min-width: 200px;
				min-height: 25px;
				line-height: 25px;
				text-align: center;
				border-collapse: collapse;
			}
			.borderDiv{
				border:1px solid #000
				}
				.min{
						border:1px solid #000;
						height: 400px;
						width: 100px;
						float: left;
					}
				.right{
					border:1px solid #000;
					height: 400px;
				}
				
		
		</style>
		
		
	</head>
	<body>
		<div id="app">
		 <div  class="borderDiv">
		  <!-- 头部 -->
		   <component-all>
			<template v-slot:header>
				<div class="borderDiv">我是标题</div>
			</template>
			<!-- 中间 -->
			<div class="min">
				<min-all></min-all>
			</div>
			<!-- 右边显示页面 -->
			<div class="right">
				<keep-alive>
					<component :is="curCom"></component>
				</keep-alive>
				<!-- book详情页面 -->
				<!-- <keep-alive>
					<component :is="curCom2"></component>
				</keep-alive> -->
			</div>
			
			<!-- 底部 -->
			<template v-slot:footer>
				<div class="borderDiv">
					<p style="text-align: center;">我是底部</p>
				</div>
			</template>
		   </component-all>
		 </div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		  //整体组件
		   let componentAll = {
			   data() {
				   return {
					   
				   }
			   },
				template: `
				    <div class="container">
						<header>
							<slot name="header"></slot>
						</header>
						<main>
							<slot></slot>
						</main>
						<footer>
							<slot name="footer"></slot>
						</footer>
			        </div>
				`
		   }
		   let minAll = {
				data() {
					return {

					}
				},
			
				template: `
					<div class="container">
						<slot>
							<input type="button" value="用户管理" @click="$emit('user')">
							<br>
							<input type="button" value="购物车"   @click="$emit('goods')">
						</slot>
					</div>			
					`,

			}
			let userManager = {
				template: `
				    <div>用户管理</div>
				`
			}
			let booksManager = {
				data() {
					return {
						books: [
							{
							isChecked: false,
							id: 1,
							tdate: '2020-10',
							price: 100,
							count: 2,
							name: '《Java从入门到放弃》',
							},
							{
							isChecked: false,
							id: 2,
							tdate: '2010-10',
							price: 90.01,
							count: 1,
							name: '《PHP从入门到放弃》',
							},
							{
							isChecked: false,
							id: 3,
							tdate: '2012-10',
							price: 80,
							count: 1,
							name: '《Python从入门到放弃》',
							},
							{
							isChecked: false,
							id: 4,
							tdate: '2013-10',
							price: 70,
							count: 1,
							name: '《什么都是从入门到放弃》',
							}

						],
					}
				},
				computed: {
					total: function () {
						return this.books.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.count, 0);
					},
				},
				methods: {
					add: function (item) {
						item.count++;
					},
					mouse: (item) => item.count--,

					remove: function (index) {
						this.books.splice(index, 1);
					},
					checkAll: function () {
						var _this = this
						if (this.checkall) {
							//实现反选
							this.checked = []
						} else {
							//实现全选
							this.checked = []
							this.books.forEach(function (item) {
								_this.checked.push(item.id)
							})
						}
						if (this.checked.length === this.books.length) {
							this.checkall = true
						}
					},
					select: function (index) {
						console.log("index:" + index);
						if (this.books[index] != null) {
							if (this.books[index].isChecked)
								return this.books[index].isChecked = false;
							return this.books[index].isChecked = true;
						  }

					    }
				    },
					filters: {
						formatPrice: price => '￥' + price.toFixed(2)
					},
				    template:`
						<div>
						<table>
							<thead>
								<tr>
									<th><input type="checkbox" @click="checkAll" v-model="checkall"></th>
									<th>ID</th>
									<th>书籍名称</th>
									<th>出版日期</th>
									<th>价格</th>
									<th>购买数量</th>
									<th>操作</th>
								</tr>
							</thead>
						<tbody id="body">
							<tr v-for="(item,index) in books" :key="item.id" v-on:click="select(index)">
								<!-- <td><input type="checkbox" :checked="item.isChecked"></td> -->
								<!-- <td><input type="checkbox" v-model="checked" :value="item.id"></td> -->
								<td><input type="checkbox" :checked="item.isChecked" :value="item.id"></td>
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.tdate}}</td>
								<td>{{item.price | formatPrice}}</td>
								<td>
									<button type="button" @click="mouse(item)" :disabled="item.count < 1">-</button>
									{{item.count}}
									<button type="button" v-on:click="add(item)">+</button>
								</td>
								<td><button type="button" @click="remove(index)">移除</button></td>
							</tr>
						</tbody>
					</table>
					<h3>总价：{{total | formatPrice}}</h3>
				</div>
				`
			}
			
			let app = new Vue({
				el: '#app',
				data:{
					curCom: 'user-manager'
				},
				components:{
					'component-all': componentAll,
					'min-all': minAll,
					'user-manager': userManager,
					'books-manager': booksManager
				},
				methods:{
                   toUser:function(){
					   this.curCom = 'user-manager'
				   },
				   toBooks(){
					   this.curCom = 'books-manager'
				   }
				}
			})
		</script>
  </body>
</html>
